<style>
    .navbar { 
        background: #ffffff; 
        box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
        padding: 0;
        margin: 0;
    }
    .navbar-brand { font-weight: bold; }
    .nav-item { 
        text-align: center;
        display: inline-block;
        width: 12.5vw;
    }
    .nav-link:hover {
        background-color: rgba(0,0,0,0.05);
        border-radius: 4px;
    }
    .dropdown-menu {
        min-width: 200px;
    }
    @media (min-width: 500px) {
        .navbar-nav {
            display: block;
            width: 100%;
        }
        .dropdown-menu {
            position: absolute;
        }
    }
    @media (max-width: 500px) {
        .navbar {
            height: auto;
        }
        .navbar-nav {
            display: block;
        }
        .nav-item {
            display: block;
            width: 100%;
            float: none;
        }
        .dropdown-menu {
            position: static;
            width: 100%;
            text-align: center;
        }
    }
</style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
    <div>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav d-flex justify-content-between w-100">
                <li class="nav-item">
                    <a class="nav-link" href="/"><b>主页</b></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/dashboard">启动</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/results">结果</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/services">服务</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/running">执行中</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/workflow">工作流</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/start_guide">快速上手</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="documentationDropdown" role="button" data-bs-toggle="dropdown">
                        文档
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="documentationDropdown">
                        <li><a class="dropdown-item" href="/doc/calib">标定(calibration)</a></li>
                        <li><a class="dropdown-item" href="/doc/service">服务(service)</a></li>
                        <li><a class="dropdown-item" href="/doc/types">类型(types)</a></li>
                        <li><a class="dropdown-item" href="/doc/user_defined_service">用户自定义服务(user_defined_service)</a></li>
                        <li><a class="dropdown-item" href="/doc/future">未来特性(future)</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>